<template>
  <div>
    <van-nav-bar :title="name" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="ellipsis" size="18" @click="showShare = true" />
      </template>
    </van-nav-bar>
    <van-share-sheet v-model:show="showShare" :options="options" />
    <!-- <vue-keyboard :width="100"></vue-keyboard> -->
    <div id="content">
      <van-list>
        <van-cell>
          <div>
            <div style="text-align: center">2022/1/1 上午9:21:37</div>
            <div id="main">
              <van-image
                round
                width="30px"
                height="30px"
                :src="head"
                style="float: left"
              />
              <div id="otherBox">
                <span>&nbsp;&nbsp;{{ news }}&nbsp;&nbsp;</span>
              </div>
            </div>
          </div>
        </van-cell>
        <van-cell v-for="item in chatInfo" :key="item">
          <div>
            <div style="text-align: center">{{ item.time }}</div>
            <div id="main">
              <van-image
                round
                width="30px"
                height="30px"
                :src="userhead"
                style="float: right"
              />
              <div id="infoBox">
                <span>&nbsp;&nbsp;{{ item.content }}&nbsp;&nbsp;</span>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <van-cell-group id="field">
      <van-field v-model="keyword">
        <template #button>
          <van-button size="small" type="primary" @click="send"
            >发送</van-button
          >
        </template>
      </van-field>
    </van-cell-group>
  </div>
</template>

<script>
import { ref } from "vue";
import axios from "axios";
export default {
  setup() {
    const showShare = ref(false);
    const options = [
      {
        name: "查看主页",
        icon: "https://img.yzcdn.cn/vant/custom-icon-light.png",
      },
      {
        name: "免打扰",
        icon: "https://img.yzcdn.cn/vant/custom-icon-fire.png",
      },
      {
        name: "屏蔽",
        icon: "https://img.yzcdn.cn/vant/custom-icon-water.png",
      },
      {
        name: "举报",
        icon: "https://img.yzcdn.cn/vant/custom-icon-fire.png",
      },
    ];

    return {
      options,
      showShare,
    };
  },
  data() {
    return {
      head: "",
      keyword: "",
      chatInfo: [],
      news: "",
      name: "",
      userhead: "",
    };
  },
  mounted() {
    this.getmes();
    //获取聊天对象信息
    axios.get("/js/user.json").then((res) => {
      var item = res.data.user.datalist;
      for (var i in item) {
        if (this.$route.params.pid === item[i].uid) {
          this.head = item[i].headUrl;
          this.name = item[i].name;
          return;
        }
      }
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //回复消息
    send() {
      if (this.keyword != "") {
        this.chatInfo.push({
          type: "other",
          content: this.keyword,
          time: new Date().toLocaleString(),
        });
        this.keyword = "";
        axios.get("/js/user.json").then((res) => {
          var item = res.data.user.datalist;
          for (var i in item) {
            if (localStorage.getItem("uid") === item[i].uid) {
              this.userhead = item[i].headUrl;
              return;
            }
          }
        });
      }
    },
    //得到对方消息内容
    getmes() {
      var item = JSON.parse(localStorage.getItem("message"));
      for (var i in item) {
        if (this.$route.params.pid == item[i].pid) {
          this.news = item[i].news;
          break;
        }
      }
    },
  },
};
</script>

<style scoped>
#main {
  margin-top: 10px;
}
#otherBox {
  max-width: 200px;
  min-height: 30px;
  line-height: 30px;
  margin-left: 10px;
  background-color: rgb(86, 122, 223);
  color: aliceblue;
  border-radius: 8px;
  float: left;
}
#infoBox {
  float: right;
  max-width: 200px;
  min-height: 30px;
  line-height: 30px;
  margin-right: 10px;
  background-color: rgb(86, 122, 223);
  color: aliceblue;
  border-radius: 8px;
}
#field {
  width: 100%;
  position: fixed;
  bottom: 0;
}
</style>